<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>

	<jsp:include page="header.jsp"></jsp:include>
	
	<jsp:include page="menu.jsp"></jsp:include>
	
	<div class="container">
	
		<h1>添加员工</h1>
		<form action="emp.do?action=add" method="POST"
			enctype="multipart/form-data">
			姓名:<input type="text" name="ename"><br>
			电话:<input type="text" name="ephone"><br>
			部门:<select name="did">
				
				</select>
			<br>
			生日:<input type="date" name="ebirthday"><br>
			照片:<input type="file" name="ephoto"><br>
			<input type="submit" value="添加"><br>
			${error }
		</form>
	</div>
	
	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript">
		
		// 获取到真实的部门列表
		// 使用异步的方式获取部门列表[{"did": 1, "dname": "开发部"}, {}, {} ]
		$.ajax({
			url : "dept.do?action=getAllJson",
			data : {},
			type : 'POST',
			dataType : "JSON",
			success : function(data){
				// 请求成功时
				console.log(data);
				
				var html = "";
				// 遍历data中的每一个部门
				$.each(data, function(index, item){
					html += '<option value="'+item.did+'">'+item.dname+'</option>';
				});
				
				$("select[name='did']").html(html);
				
			},
			error : function(){
				console.log("请求失败");
			}
		});
	
		
	
	</script>
</body>
</html>